<template>
  <div>
    <div ref="file"></div>
  </div>
</template>

<script>
import { renderAsync } from "docx-preview";
import axios from 'axios'

export default {
  props: {
    url: {
      required: true,
      type: String
    }
  },
  url(value) {
    this.renderFile();
  },
  data() {
    return {
      wordText: ''
    }
  },
  created() {
    this.renderFile()
  },
  methods: {
    renderFile() {
      axios({
        method: "get",
        responseType: "blob",
        url: this.url,
      }).then((response) => {
        renderAsync(response.data, this.$refs.file);
      });
    },
  }
}
</script>

<style>
.docx-container ::v-deep .docx-wrapper {
  background-color: #fff;
  padding: 20px 20px;
}
.docx-container ::v-deep .docx-wrapper > section.docx {
  width: 55vw !important;
  padding: 0rem !important;
  min-height: auto !important;
  box-shadow: none;
  margin-bottom: 0;
  overflow-y: scroll;
  height: 100vh;
}

.docx-container ::v-deep .docx-wrapper > section.docx::-webkit-scrollbar {
  display: none;
}
</style>